<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>经典软件体系结构教学网站</title>
  <link rel="icon" href="../static/img/swpu.png">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>

<div id="app">
  <div class="menu-container">
    <el-menu :default-active="activeTab" mode="vertical" @select="handleTabClick">
      <el-menu-item v-for="(tab, index) in tabs" :key="index" :index="tab.name">
        {{ tab.name }}
      </el-menu-item>
    </el-menu>
  </div>
  <div class="submenu-container">
    <el-menu :default-active="activeSubtab" mode="vertical" @select="handleSubtabClick">
      <el-menu-item v-for="(subtab, index) in activeSubtabs" :key="index" :index="subtab">
        <a href="#">{{ subtab }}</a>
      </el-menu-item>
    </el-menu>
  </div>
  <div class="display">
    <h2>{{ activeSubtab }}</h2>
    <div v-show="activeSubtab === 'Principles'">
      <!-- 显示原理图或文字说明 -->
    </div>
    <div v-show="activeSubtab === 'Code Structure'">
      <!-- 显示源程序代码结构 -->
    </div>
    <div v-show="activeSubtab === 'Key Functions'">
      <!-- 显示关键函数的程序代码 -->
    </div>
    <div v-show="activeSubtab === 'Input Output'">
      <!-- 显示输入输出展示框 -->
      <input type="file" @change="handleFileUpload">
      <div v-show="fileContent !== ''">{{ fileContent }}</div>
    </div>

  </div>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tabs: [
          { name: 'Main Program-Subprogram', subtabs: ['Principles', 'Code Structure', 'Input Output'] },
          { name: 'Object-Oriented', subtabs: ['Principles', 'Code Structure', 'Input Output'] },
          { name: 'Event System', subtabs: ['Principles', 'Code Structure', 'Input Output'] },
          { name: 'Pipeline-Filter', subtabs: ['Principles', 'Code Structure', 'Input Output'] }
        ],
        activeTab: '',
        activeSubtab: '',
        fileContent: ''
      };
    },
    computed: {
      activeSubtabs() {
        const tab = this.tabs.find(item => item.name === this.activeTab);
        return tab ? tab.subtabs : [];
      }
    },
    methods: {
      handleFileUpload(event) {
        const file = event.target.files[0];
        const reader = new FileReader();
        reader.onload = () => {
          this.fileContent = reader.result;
        };
        reader.readAsText(file);
      },
      handleTabClick(tab) {
        this.activeTab = tab;
        this.activeSubtab = this.tabs.find(item => item.name === tab).subtabs[0];
      },
      handleSubtabClick(subtab) {
        this.activeSubtab = subtab;
      }
    }
  });
</script>

<style>
  .menu-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    background-color: #ccc;
    overflow-y: auto; /* 允许滚动 */
  }
  .submenu-container {
    position: fixed;
    top: 0;
    left: 200px; /* 子菜单容器的左侧偏移量 */
    width: 200px;
    height: 100%;
    background-color: #eee;
    overflow-y: auto; /* 允许滚动 */
  }
  .display {
    margin-left: 420px; /* 调整显示区域的左侧边距以适应子菜单的宽度 */
  }
  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  li {
    padding: 10px;
    cursor: pointer;
  }
  li:hover {
    background-color: #eee;
  }
  a {
    text-decoration: none;
    color: black;
  }
</style>

</body>
</html>